<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">

            <el-form-item label="分页起始值">
                <el-select v-model="propJson.pageStartIndex" placeholder="分页起始值" style="width: 100%">
                    <el-option label="起始1" value="1" />
                    <el-option label="起始0" value="0" />
                </el-select>
            </el-form-item>

            <el-form-item label="当前分页">
                <el-radio-group v-model="propJson.currentPageType">
                    <el-radio label="custom">自定义内容</el-radio>
                    <el-radio label="variable">关联参数</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="分页值" v-if="propJson.currentPageType === 'custom'">
                <el-input v-model="propJson.currentPageCustom" style="width: 100%" placeholder="分页值" />
            </el-form-item>

            <el-form-item label="分页值" v-if="propJson.currentPageType === 'variable'">
                <el-select v-model="propJson.currentPageVariable" placeholder="分页值" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="分页大小">
                <el-radio-group v-model="propJson.pageSizeType">
                    <el-radio label="custom">自定义内容</el-radio>
                    <el-radio label="variable">关联参数</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="分页大小值" v-if="propJson.pageSizeType === 'custom'">
                <el-input v-model="propJson.pageSizeCustom" style="width: 100%" placeholder="分页大小值" />
            </el-form-item>

            <el-form-item label="分页大小值" v-if="propJson.pageSizeType === 'variable'">
                <el-select v-model="propJson.pageSizeVariable" placeholder="分页大小值" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="元数据数量">
                <el-radio-group v-model="propJson.totalType">
                    <el-radio label="custom">自定义内容</el-radio>
                    <el-radio label="variable">关联参数</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="总数值" v-if="propJson.totalType === 'custom'">
                <el-input v-model="propJson.totalCustom" style="width: 100%" placeholder="总数值" />
            </el-form-item>

            <el-form-item label="总数值" v-if="propJson.totalType === 'variable'">
                <el-select v-model="propJson.totalVariable" placeholder="总数值" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="布局位置">
                <el-radio-group v-model="propJson.layOutPosition">
                    <el-radio label="left">居左</el-radio>
                    <el-radio label="center">居中</el-radio>
                    <el-radio label="right">居右</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="分页尺寸">
                <el-radio-group v-model="propJson.paginationSizeType">
                    <el-radio label="small">小号</el-radio>
                    <el-radio label="default">默认</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否填充背景色">
                <el-radio-group v-model="propJson.isBackground">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="每页数量枚举">
                <el-radio-group v-model="propJson.pageSizeListType">
                    <el-radio label="custom">自定义内容</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="枚举值" v-if="propJson.pageSizeListType === 'custom'">
                <el-input v-model="propJson.pageSizeList" style="width: 100%" placeholder="枚举值" />
            </el-form-item>

            <el-form-item label="是否使用上一页">
                <el-radio-group v-model="propJson.paginationLayoutPrevFlag">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="所属位置" v-if="propJson.paginationLayoutPrevFlag">
                <el-input-number v-model="propJson.paginationLayoutPrevNum" :min="1" />
            </el-form-item>

            <el-form-item label="是否使用分页数">
                <el-radio-group v-model="propJson.paginationLayoutPagerFlag">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="所属位置" v-if="propJson.paginationLayoutPagerFlag">
                <el-input-number v-model="propJson.paginationLayoutPagerNum" :min="1" />
            </el-form-item>

            <el-form-item label="是否使用下一页">
                <el-radio-group v-model="propJson.paginationLayoutNextFlag">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="所属位置" v-if="propJson.paginationLayoutNextFlag">
                <el-input-number v-model="propJson.paginationLayoutNextNum" :min="1" />
            </el-form-item>

            <el-form-item label="是否使用跳转页">
                <el-radio-group v-model="propJson.paginationLayoutJumperFlag">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="所属位置" v-if="propJson.paginationLayoutJumperFlag">
                <el-input-number v-model="propJson.paginationLayoutJumperNum" :min="1" />
            </el-form-item>

            <el-form-item label="是否使用分页大小列表">
                <el-radio-group v-model="propJson.paginationLayoutSizesFlag">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="所属位置" v-if="propJson.paginationLayoutSizesFlag">
                <el-input-number v-model="propJson.paginationLayoutSizesNum" :min="1" />
            </el-form-item>

            <el-form-item label="是否使用展示元数据总数">
                <el-radio-group v-model="propJson.paginationLayoutTotalFlag">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="所属位置" v-if="propJson.paginationLayoutTotalFlag">
                <el-input-number v-model="propJson.paginationLayoutTotalNum" :min="1" />
            </el-form-item>

            <span>分页行为</span>

            <el-form :model="propJson" label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="index" v-for="(item, index) in propJson.pageChangeInnerRequestVariable">
                        <template #title>
                            <div class="collapseTitle">
                                <span>{{item.name}}</span>
                            </div>
                        </template>
                        <el-form-item label="参数类型">
                            <el-radio-group v-model="item.type">
                                <el-radio label="custom">自定义</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="赋值字段" v-if="item.type === 'custom'">
                            <el-input v-model="item.variableName" style="width: 100%" placeholder="$."/>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addPageAction()">添加分页行为</el-button>
            </div>

            <CommonThirdServiceAction :actionList="propJson.paginationActionList" :commonParam="commonParam"/>

        </el-form>
    </div>
</template>

<script name="PaginationDrawer" setup lang="ts">
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction.vue";
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addPageAction() {
    if (!propJson.value.paginationActionList) {
        propJson.value.paginationActionList = []
    }
    let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", responseType: "default", apiType: "MSOA", apiPath: "",
        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
    propJson.value.paginationActionList.push(variableInfo)
}
</script>

<style scoped lang="less">

</style>